<template>
    <!-- loadMore -->
    <view class="bottom_loading_box" :style="{ paddingTop: padding, paddingBottom: padding }">
        <view v-if="status == 'loading'" class="box_right">
            <view
                v-if="mode == 'loading1'"
                class="loading_1"
                :style="{
                    'border-color': color
                }"
            >
                <view class="ball_holder">
                    <view class="ball" :style="{ 'background-color': color }" />
                </view>
            </view>
            <view v-if="mode == 'loading2'" class="loading_2">
                <view class="line li1" :style="{ 'background-color': color }" />
                <view class="line li2" :style="{ 'background-color': color }" />
                <view class="line li3" :style="{ 'background-color': color }" />
            </view>
            <view v-if="mode == 'loading3'" class="loading_3" :style="{ 'border-top-color': color }" />
            <!-- <view v-if="mode == 'loading4'" class="loading_4" :class="{ left: !showTitle }"></view> -->
            <view v-if="mode == 'loading4'" class="loading_4">
                <view class="b1" :style="{ 'border-color': color }" />
                <view class="b2" :style="{ 'border-color': color }" />
            </view>
        </view>
        <view
            v-if="showTitle"
            class="box_left"
            :style="{ color: textColor || color, fontSize: textSize }"
            :class="{ left: mode == 'loading4' }"
        >
            {{ status == "down" ? loadTitle.down : status == "loading" ? loadTitle.loading : loadTitle.normal }}
        </view>
    </view>
</template>

<script>
export default {
    props: {
        /* loading 样式 */
        mode: {
            type: String,
            default: "loading1"
        },
        /* 状态 */
        status: {
            type: String,
            default: "loading"
        },
        /* 显示文本 */
        showTitle: {
            type: Boolean,
            default: true
        },
        /* 加载中文本 */
        loadTitle: {
            type: Object,
            default() {
                return {
                    down: "-- 上拉加载更多 --",
                    loading: "正在加载...",
                    normal: "-- 没有更多了 --"
                };
            }
        },
        /* loading 颜色 */
        color: {
            type: String,
            default: "#FFF"
        },
        /* 上下边距 */
        padding: {
            type: String,
            default: "20rpx"
        },
        /* 文字样式 */
        textColor: String,
        textSize: String
    }
};
</script>

<style lang="scss" scoped>
/* loading1  */
/* 外圆大小 */
$load1Wh: 16px;
/* border大小 */
$load1Border: 2px;
/* 内圆大小 */
$load1BallWh: 5px;

/* loading2 大小 */
$loading2Wh: 8px;

/* loading4 大小 */
$loading4Wh: 8px;
.bottom_loading_box {
    width: 100%;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .box_left {
        padding: 0 6px;
        &.left {
            position: relative;
            left: 8px;
        }
    }
    .box_right {
        .loading_1 {
            position: relative;
            width: $load1Wh;
            height: $load1Wh;
            margin: 0 auto;
            border: $load1Border solid #666666;
            border-radius: 100%;
            .ball_holder {
                position: absolute;
                width: 12px;
                height: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                animation: loading1 1.3s linear infinite;
                .ball {
                    position: absolute;
                    left: 0;
                    top: 1px;
                    width: $load1BallWh;
                    height: $load1BallWh;
                    border-radius: 100%;
                    background: #666666;
                }
            }
        }
        .loading_2 {
            display: flex;
            align-items: center;
            .line {
                display: inline-block;
                margin: 0 2px;
                width: $loading2Wh;
                height: $loading2Wh;
                border-radius: 15px;
                background-color: #666666;
                &.li1 {
                    animation: loading2 0.6s 0.1s linear infinite;
                }
                &.li2 {
                    animation: loading2 0.6s 0.2s linear infinite;
                }
                &.li3 {
                    animation: loading2 0.6s 0.3s linear infinite;
                }
            }
        }
        .loading_3 {
            border-radius: 50%;
            width: 16px;
            height: 16px;
            border: 0.25rem solid rgba(255, 255, 255, 0.2);
            border-top-color: #ffffff;
            animation: spin 1s infinite linear;
        }
        // color
        .loading_4 {
            border-radius: 50%;
            position: relative;
            opacity: 1;
            .b1,
            .b2 {
                border: $loading4Wh #ffffff solid;
                border-radius: 50%;
                width: 100%;
                height: 100%;
                position: absolute;
                top: -8px;
                left: -8px;
            }
            .b1 {
                transform: scale(1, 1);
                opacity: 1;
                animation: spWaveBe 0.6s infinite linear;
            }
            .b2 {
                transform: scale(0, 0);
                opacity: 0;
                animation: spWaveAf 0.6s infinite linear;
            }
        }
    }
}

@keyframes spWaveAf {
    from {
        transform: scale(0.5, 0.5);
        opacity: 0;
    }
    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes spWaveBe {
    from {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(1.5, 1.5);
        opacity: 0;
    }
}

@keyframes loading1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loading2 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}
</style>
